/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from "react";
import {
    Image,
    InteractionManager,
    Keyboard,
    KeyboardAvoidingView,
    ScrollView,
    StyleSheet,
    Text,
    TextInput,
    TouchableOpacity,
    View
} from "react-native";
import GCStyle from "../../../Model/Global/GCStyle";
import TabBar from "../../../TabBar";
import {connect} from "react-redux";
import {Login} from "../../../Action/UserAction";
import Toast from "react-native-toast";
class MyLogin extends Component {
    constructor(props) {
        super(props);
        this.state = {
            inputUserName: '',
            inputPassword: '',
        }
    }

    componentWillUpdate(nextProps, nextState) {
        InteractionManager.runAfterInteractions(() => {
            const {UserReducer, dispatch} = nextProps;
            if (UserReducer.isLoggedIn) {
                this.props.navigator.resetTo({
                    name: 'TabBar',
                    component: TabBar,
                    params: {}
                });
            }
        });
    }

    loginAction() {
        if (this.state.inputUserName.length === 0) {
            Toast.show('请输入您的账号');
            return;
        }
        if (this.state.inputPassword.length === 0) {
            Toast.show('请输入您的密码');
            return;
        }
        InteractionManager.runAfterInteractions(() => {
            const {dispatch} = this.props;
            dispatch(Login(this.state.inputUserName, this.state.inputPassword, 1));
        });
    }

    onClickView(){
        Keyboard.dismiss();
    }

    render() {        
        return (
            <TouchableOpacity  onPress={() => this.onClickView()} activeOpacity={1} style={styles.container}>
                <View style={GCStyle.Style.navigatorView}>
                    <Text style={GCStyle.Style.titleTxt}>登录</Text>
                </View>

                <Image resizeMode='contain' source={require('../../../Resource/Imgs/login_logo.png')} style={[GCStyle.Style.loginIcon,{marginTop:54}]}/>
                <KeyboardAvoidingView keyboardVerticalOffset={40}   style={styles.containerText} behavior="position">
                    <ScrollView scrollEnabled ={false} style={styles.scrollView}>
                        <View style={styles.inputView}>
                            <Image resizeMode='contain' source={require('../../../Resource/Imgs/signin_icon_account.png')} style={styles.pnputImg}/>
                            <TextInput
                                placeholder={'请输入您的手机号'}
                                value={this.state.inputUserName}
                                onChangeText={inputUserName => this.setState({inputUserName})}
                                maxLength={11}
                                keyboardType={'numeric'}
                                underlineColorAndroid={'transparent'}
                                clearButtonMode={'while-editing'}
                                style={styles.inputTxt}
                            />
                            <View style={[GCStyle.GCOrderCell.lineStyle, {
                                marginTop: 47,width:GCStyle.GCPubWidth-100
                            }]}/>
                        </View>

                        <View style={[styles.inputView,{marginTop:0}]}>
                            <Image resizeMode='contain' source={require('../../../Resource/Imgs/signin_icon_password.png')} style={styles.pnputImg}/>
                            <TextInput
                                placeholder={'请输入密码'}
                                value={this.state.inputPassword}
                                onChangeText={inputPassword => this.setState({inputPassword})}
                                clearButtonMode={'while-editing'}
                                keyboardType={'default'}
                                underlineColorAndroid={'transparent'}
                                style={styles.inputTxt}
                                secureTextEntry={true}
                            />
                            <View style={[GCStyle.GCOrderCell.lineStyle, {
                                marginTop: 47,width:GCStyle.GCPubWidth-100
                            }]}/>
                        </View>
                    </ScrollView>
                </KeyboardAvoidingView>

                <TouchableOpacity
                    activeOpacity={0.5}
                    style={[GCStyle.Style.loginBn,{marginTop:80}]}
                    onPress={() => this.loginAction()}>
                    <Text style={GCStyle.Style.loginTxt}>
                        登录
                    </Text>
                </TouchableOpacity>
            </TouchableOpacity>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    pnputImg:{
        height:15,
        width:12,
        marginRight:12

    },
    inputView:{
        width:GCStyle.GCPubWidth-100,
        height:45,
        alignItems:'center',
        flexDirection:'row',
    },
    inputTxt:{
        flex:1,
        fontSize:13,

    },
    scrollView: {
        marginTop:60,
        height:95,

    },
    containerText: {
        width:GCStyle.GCPubWidth-100,
        justifyContent: 'center',
    },

});

export default connect((state) => {
    return {UserReducer} = state;
})(MyLogin);